<template>
  <div class="journal">
    <div>
      <span class="title">系统错误日志</span>
      <div class="header">
        <div>
          <span style="margin:0 10px">服务ID</span>
          <el-input v-model="serviceId" placeholder="请输入服务ID" style="width: 200px" size="small"></el-input>
        </div>

        <div>
          <span style="margin: 0 10px">创建人</span>
          <el-input v-model="createBy" placeholder="请输入创建人" style="width: 200px" size="small"></el-input>
        </div>

        <div>
          <span style="margin: 0 10px">方法名称</span>
          <el-input v-model="methodName" placeholder="请输入方法名称" style="width: 200px" size="small"></el-input>
        </div>

        <el-button size="small" type="primary" style="margin-left: 10px" @click="search">搜索</el-button>
        <el-button size="small" style="margin-left: 10px" @click="reset">重置</el-button>
      </div>
      <el-table
        :data="tableData"
        @row-click="openTable"
        ref="refTable"
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="服务id：">
                <span>{{ props.row.serviceId }}</span>
              </el-form-item>
              <el-form-item label="服务器ip：">
                <span>{{ props.row.serverIp }}</span>
              </el-form-item>
              <el-form-item label="服务器名：">
                <span>{{ props.row.serverHost }}</span>
              </el-form-item>
              <el-form-item label="环境：">
                <span>{{ props.row.env }}</span>
              </el-form-item>
              <el-form-item label="用户代理：">
                <span>{{ props.row.userAgent }}</span>
              </el-form-item>

              <el-form-item label="请求URL：">
                <span>{{ props.row.requestUri }}</span>
              </el-form-item>
              <el-form-item label="操作方式：">
                <span>{{ props.row.method }}</span>
              </el-form-item>
              <el-form-item label="方法类：">
                <span>{{ props.row.methodClass }}</span>
              </el-form-item>
              <el-form-item label="方法名：">
                <span>{{ props.row.methodName }}</span>
              </el-form-item>
              <el-form-item label="操作提交的数据：">
                <span>{{ props.row.params }}</span>
              </el-form-item>
              <el-form-item label="执行时间：">
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item label="创建人：">
                <span>{{ props.row.createBy }}</span>
              </el-form-item>

              <el-form-item label="创建时间：">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
              <el-form-item label="堆栈信息：">
                <span>{{ props.row.stackTrace }}</span>
              </el-form-item>
              <el-form-item label="异常名：">
                <span>{{ props.row.exceptionName }}</span>
              </el-form-item>
              <el-form-item label="异常消息：">
                <span>{{ props.row.message }}</span>
              </el-form-item>
              <el-form-item label="文件名：">
                <span>{{ props.row.fileName }}</span>
              </el-form-item>
              <el-form-item label="代码行数：">
                <span>{{ props.row.lineNumber }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          prop="serviceId"
          width="150"
          label="服务ID">
        </el-table-column>
        <el-table-column
          prop="serverIp"
          width="150"
          label="服务器 ip">
        </el-table-column>
        <el-table-column
          prop="serverHost"
          width="150"
          label="服务器名">
        </el-table-column>
        <el-table-column
          prop="env"
          width="100"
          label="环境">
        </el-table-column>
        <el-table-column
          prop="userAgent"
          label="用户代理"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="requestUri"
          label="请求URL"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="method"
          width="80"
          label="操作方式">
        </el-table-column>
        <el-table-column
          prop="methodClass"
          label="方法类"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="methodName"
          label="方法名"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total > 0"
        style="margin-top: 10px"
        class="fixed"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import {systemOrrerJournal} from '@/api/user'
    export default {
        name: "journal",
        data() {
            return {
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                total: 0,
                serviceId: '',
                createBy: '',
                tenantId: '',
                methodName:''
            }
        },
        created() {
            this.init()
        },
        methods: {
            init(){
                systemOrrerJournal(this.pageNo, this.pageSize, this.serviceId, this.createBy,this.tenantId, this.methodName).then(res => {
                    if(res.data.success) {
                        this.tableData = res.data.data.records
                        this.total = res.data.data.total
                    }
                })
            },
            handleSizeChange(size) {
                this.pageSize = size
                this.init()
            },
            handleCurrentChange(page) {
                this.pageNo = page
                this.init()
            },
            search() {
                this.pageNo = 1
                this.init()
            },
            reset() {
                this.pageNo = 1
                this.serviceId = ''
                this.createBy = ''
                this.tenantId = ''
                this.methodName = ''
                this.init()
            },
            openTable(row) {
                this.$refs.refTable.toggleRowExpansion(row)
            }
        }
    }
</script>
<style lang="scss">


  .demo-table-expand {
    font-size: 0;
    .el-form-item__label {
      flex: 0 0 125px;
      color: #99a9bf;
    }
    .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 100%;
      display: flex !important;
    }
    .el-form-item__content{
      word-break: break-all;
      width: 100%;
    }
  }
</style>


<style scoped lang="scss">
  .title{
    color: #435B77;
    font-weight: 600;
    font-size: 18px;
    display: inline-block;
    margin-bottom: 10px;
    padding-left: 10px;
  }
  .journal{
    background-color: white;
    font-size: 13px;
    padding: 15px;
    margin-bottom: 35px;
  }
  .header{
    display: flex;
    margin: 15px 0;
  }
</style>
